<template>
	<view class="content">
		<view>
			<u-icon name="tags" />
			{{'这是一个uni脚手架的模板多余字段',13|sliceStr}}
			<!--多余字段未展示来自于过滤器的效果-->
		</view>
		<view class="">
			<u-icon name="tags" />
			内置sass uview-Ui vuex 等常用插件
		</view>
		<view class="">
			<u-icon name="tags" />
			common下fun封装了一些js工具类
		</view>
		<view class="">
			<u-icon name="tags" />
			common下dateFunction封装了一些时间工具类
		</view>
		<view class="">
			<u-icon name="tags" />
			apis封了装请求
		</view>
		<view class="">
			<u-icon name="tags" />
			config.js
			根据环境，编译不同的请求地址
		</view>
		<view class="">
			<u-icon name="tags" />
			index.js存储所有的api请求
			你可以this.$apis.apiName去调用
		</view>
		<view class="">
			<u-icon name="tags" />
			http.js封装了请求类型
			你可以this.$http(url,data)去调用
		</view>
		<view class="">
			<u-icon name="tags" />
			request.js封装了请求
		</view>
		<view class="">
			<u-icon name="tags" />
			setCss下有些sass文件你可以在这里查看公用的样式
		</view>
		<view class="">
			<u-icon name="tags" />
			display-flex.scss定义了一些弹性盒子类
		</view>
		<view class="">
			<u-icon name="tags" />
			clearDefault.scss清除默认样式
		</view>
		<view class="">
			<label>
				<checkbox :value="1" /><text>checkbox样式更改了</text>
			</label>
		</view>
		<view class="">
			<u-icon name="tags" />
			vuex变量 >> token:{{token}}
			<< <u-button @click="onToken">点击修改</u-button>
		</view>
		<view class="">
			<u-icon name="tags" />
			全屏loading
			<u-button @click="showLoad">点击显示</u-button>
		</view>
		<ourLoading ref="load" color="#F96C63" text="两秒后关闭" isFullScreen />
		<!-- 小程序授权 -->
		<empower :destMemberId='null' ref="empower"></empower>
	</view>
</template>

<script>
	import { mapMutations, mapState } from 'vuex';
	export default {
		data() {
			return {}
		},
		onLoad() {
			this.getTestApi()

		},
		onShow() {
			//调用授权
			this.$refs['empower'].login()
		},
		computed: {
			...mapState(['token'])
		},

		methods: {
			...mapMutations(['setTokenType']),
			onToken() {
				this.setTokenType(!this.token)
			},
			showLoad() {
				this.$refs['load'].isActive = true
				setTimeout(() => {
					this.$refs['load'].isActive = false
				}, 1500)
			},
			async getTestApi() {

				//async awat同步操作
				try {
					let data1 = await this.$apis.testApi()
				} catch (err) {
					console.log('错误信息')
				}
				//异步操作
				this.$http.post('/test', { data: "提交数据" }).then(res => {

				})

			}
		}
	}
</script>
<style>

</style>
<style lang="scss" scoped>
	.content {
		>view {
			padding: 20rpx;
			line-height: 50rpx;
		}

		>view:nth-child(1) {
			font-size: 30rpx;
			font-weight: bold;
		}
	}
</style>
